<div style="margin-top:45px;" v-if="status">

	<!-- 图标 -->
	<a-alert v-if="!status.connect"
		message="警告"
		description="屏幕掉线啦！！！"
		type="warning"
		showIcon
	></a-alert>

	<template v-if="status.data">
		<a-descriptions :title="(status.data.roomId > 1) ? '已连接直播房间 ' + status.data.roomId : '未连接直播房间'"
			style="margin-top:30px;"></a-descriptions>
		<a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }">
			<a-form-item label="房间号">
				<a-input-search v-model.number="roomId" placeholder="例如 : 751714" @search="editRoomIdSubmit()">
					<a-button slot="enterButton">修改</a-button>
				</a-input-search>
			</a-form-item>
		</a-form>
	</template>

	<template v-if="status.data && status.data.roomId > 1">
		<a-descriptions title="观众参与" style="margin-top:30px;"></a-descriptions>
		<a-row>
			<a-button type="primary" @click="btnBegin()" v-if="status.data.phase == 0" >开始统计</a-button>
			<a-button @click="btnBegin()" v-else-if="status.data.phase == 1 || status.data.phase == 2" >继续统计</a-button>
			<a-button type="primary" @click="btnBegin()" v-else >重新统计</a-button>
			<a-button :type="status.data.phase == 1 ? 'primary' : ''" @click="btnReady()">停止统计</a-button>
		</a-row>
		<span v-if="status.data.phase == 0" style="color : red;">你还没开始统计参与人数，点击开始统计来开始抽奖。</span>
		<a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }">
			<a-form-item label="任何弹幕即可" style="margin-bottom: 1px;">
				<a-checkbox v-model="anyWords"></a-checkbox>
			</a-form-item>
			<a-form-item label="抽奖弹幕" style="margin-bottom: 1px;">
				<a-input-search v-model.trim="words" placeholder="输入什么来参与抽奖" @search="btnWords()">
					<a-button slot="enterButton">修改</a-button>
				</a-input-search>
			</a-form-item>
			<a-form-item label="启用倒计时" style="margin-bottom: 1px;">
				<a-checkbox v-model="countdownEnable"></a-checkbox>
			</a-form-item>
			<a-form-item label="倒计时几秒">
				<a-input-search v-model.number="countdown" placeholder="比如 90" @search="editCountdownSubmit()">
					<a-button slot="enterButton" :disabled="!countdownEnable">修改</a-button>
				</a-input-search>
			</a-form-item>
		</a-form>
	</template>

	<template v-if="status.data && status.data.roomId > 1">
		<a-descriptions title="抽奖部分" style="margin-top:30px;"></a-descriptions>
		<i>剩余人数 : {{countRemain()}} / {{status.data.customers.length}}</i>
		<a-row style="margin-top:20px;">
			<a-col :span="8">
				<a-button @click="btnLotteryHalf()" :disabled="status.data.phase != 2 && status.data.phase != 20" >抽一半人</a-button>
				<a-button @click="btnLotteryMinusOne()" :disabled="status.data.phase != 2 && status.data.phase != 20" >淘汰一人</a-button>
				<a-button @click="btnLotteryTo()"  :disabled="status.data.phase != 2 && status.data.phase != 20">抽到...</a-button>
			</a-col>
			<a-col :span="14">
				<a-slider style="margin-top: 6px;" v-model="lotteryTo" :min="1" :max="countRemain()" :step="1" />
			</a-col>
			<a-col :span="2">
				<a-tag style="margin-left: 16px" color="blue"> {{ lotteryTo }} </a-tag>
			</a-col>
		</a-row>
	</template>

</div>
<div v-else>
	空
</div>
